<template>
	<view class="main">
		<view class="header">
			<view class="left">
				<u-icon name="map-fill" class="icon"></u-icon>
				<text @tap="goPage(`/pages/index/indexed-list?redirect=index`)"> {{ city ? city : '选择城市' }}</text>
				<u-icon v-if="city" name="close-circle-fill" class="icon del" @tap="initCity"></u-icon>
			</view>
			<view class="right" @tap="goPage(`/pages/mine/mine`)">
				<u-icon name="account-fill" class="icon"></u-icon>
				我的
			</view>
		</view>
		<view class="show-container">
			<view class="column left">
				<img-block v-if="index % 2 === 0" v-for="(item, index) in list" :key="index" :info="item"></img-block>
			</view>
			<view class="column right">
				<img-block v-if="index % 2 === 1" v-for="(item, index) in list" :key="index" :info="item"></img-block>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		http
	} from '@/lib/js/request';
	import {
		goPage,
		delay
	} from '@/lib/js/utils';
	export default {
		data() {
			return {
				city: '',
				list: [],
				page: 1
			};
		},
		onShow() {
			this.init()
		},
		onReachBottom() {
			this.page++;
			this.getPostList();
		},
		onPullDownRefresh() {
			this.page = 1;
			this.getPostList();
		},
		methods: {
			initCity() {
				uni.setStorageSync('city_index', '')
				this.init()
			},
			goPage,
			init() {
				this.city = uni.getStorageSync('city_index');
				this.page = 1;
				this.getPostList();
			},
			async getPostList() {
				const res = await http('/post/select', {
					page: this.page,
					city: this.city || ''
				});
				if (this.page === 1) {
					this.list = res.data;
				} else {
					this.list = this.list.concat(res.data);
				}

				await delay(1000);
				uni.stopPullDownRefresh();
			}
		}
	};
</script>

<style lang="scss" scoped>
	.main {
		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 20rpx 0;
			color: $color-1;

			.icon {
				margin: 5rpx;

				&.del {
					color: $color-3;
				}
			}
		}

		.show-container {
			display: flex;

			.column {
				width: 50%;
				padding: 20rpx;

				&.left {
					padding-right: 10rpx;
				}

				&.right {
					padding-left: 10rpx;
				}
			}
		}
	}
</style>
